<template>
	<view>
		<view class="group">
			<vant-cell title="调班日期" value="请选择" is-link @click="onSelectDate"/>
		</view>
		
		<view class="group">
			<vant-cell title="申请人" value="时间补丁积分" is-link />
			<vant-cell title="申请班种" value="请选择" is-link  />
		</view>
		
		<view class="group">
			<vant-cell  title="调班对象" value="请选择" is-link @click="gotoSelect"/>
			<vant-cell title="调换班种" value="请选择" is-link />
		</view>
		<view class="group">
			<textarea class="reason" placeholder="请输入申请理由, 不超过100字"  maxlength="100" />
		</view>
		
		<view class="button">
			<vant-button round type="info" size="large" color="#40a9ff">立即提交</vant-button>
		</view>
		
		<vant-notify id="van-notify" />
		
		<vant-popup
			:show="showDate"
			round
			position="bottom"
		>
			<vant-datetime-picker
				type="date"
				@cancel="onClose"
				@confirm="onConfirm"
			/>
		</vant-popup>
	</view>
</template>

<script>
	import Notify from  '@/wxcomponents/vant/notify/notify';
	
	export default {
		data() {
			return {
				showDate: false,
			}
		},
		methods: {
			onSelectDate() {
				this.showDate = true;
			},
			onClose() {
				this.showDate = false;
			},
			onConfirm() {
				this.showDate = false;
				Notify('所选日期未发布排班')
			},
			gotoSelect() {
				uni.navigateTo({
					url: '/pages/myApplication/select'
				})
			}
		}
	}
</script>

<style lang="scss">
	.group {
		margin: 30rpx 0;
	}
	.reason {
		padding: 20rpx;
		width: 100%;
		background-color: #FFFFFF;
	}
	.button {
		margin-top: 40rpx;
		padding: 0 20rpx;
	}
</style>
